<template>
  <div class="j-tabList">
    <swiper class="j-tabs_swiper" :slides-per-view="slidesCount">
      <swiper-slide
        v-for="t in tabList"
        :class="{ active: route.name === t.name }"
      >
        <div
          class="item"
          :class="{ active: route.name === t.name }"
          @click="switchTabs(t)"
        >
          {{ t.title }}
          <span
            class="close"
            title="删除"
            v-if="t.name !== 'Home'"
            @click.stop="removeItem(t)"
            ><icon-close-circle
          /></span>
        </div>
      </swiper-slide>
    </swiper>

    <div class="item" @click="removeAllItem">删除全部</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import LocalCache from "@/utils/storage";

import { Swiper, SwiperSlide } from "swiper/vue";
import type { TabsItem } from "./index";

interface TabType {
  title: string;
  name: string;
}

const route = useRoute();
const router = useRouter();

let tabList = ref<TabsItem[]>([
  // {
  //   title: "文章管理",
  //   name: "Essay",
  // },
]);

const switchTabs = (currentItem: TabType) => {
  router.push({ name: currentItem.name });
  saveTabs();
};

const saveTabs = () => {
  LocalCache.set("j_tabs", JSON.stringify(tabList.value));
};

const loadTabs = () => {
  const z_tabs = LocalCache.get("j_tabs");
  if (z_tabs) {
    try {
      tabList.value = JSON.parse(z_tabs);
    } catch (e) {
      console.log(e);
    }
  }
};

loadTabs();

const removeItem = (currentItem: TabType) => {
  let index = tabList.value.findIndex((item) => item.name === currentItem.name);
  if (index !== -1) {
    tabList.value.splice(index, 1);
    if (currentItem.name === route.name) {
      router.push({
        name: tabList.value[index - 1].name,
      });
    }
  }
  saveTabs();
};

const removeAllItem = () => {
  tabList.value = [
    {
      title: "原始记录",
      name: "Record",
    },
  ];
  router.push({
    name: "Record",
  });
  saveTabs();
};

watch(
  () => route.name,
  () => {
    let index = tabList.value.findIndex((item) => item.name === route.name);
    if (index === -1) {
      tabList.value.push({
        title: route.meta.title,
        name: route.name,
      } as TabType);
      saveTabs();
    }
  },
  {
    immediate: true,
  }
);

const slidesCount = ref(100);

onMounted(() => {
  const swiperDom = document.querySelector(".j-tabs_swiper") as HTMLDivElement;
  //显示宽度
  const swiperDomWidth = swiperDom?.clientWidth;

  const warpDom = document.querySelector(
    ".j-tabs_swiper .swiper-wrapper"
  ) as HTMLDivElement;

  //实际显示宽度
  const warpWidth = warpDom?.clientWidth;

  // 显示宽度 > 实际显示宽度
  if (swiperDomWidth > warpWidth) {
    return;
  }

  //  实际显示宽度 > 显示宽度
  const slideList = document.querySelectorAll(".j-tabs_swiper .swiper-slide");
  let allWidth = 0;
  let index = 1;
  for (let item of slideList) {
    allWidth += item.clientWidth + 20;
    index++;
    if (allWidth >= swiperDomWidth) break;
  }
  slidesCount.value = index;

  // 选中高亮的元素
  let selectedDom = document.querySelector(
    ".j-tabs_swiper .swiper-slide.active"
  ) as HTMLDivElement;

  if (selectedDom.offsetLeft > swiperDomWidth) {
    const offsetLeft = swiperDomWidth - selectedDom.offsetLeft;
    setTimeout(() => {
      warpDom.style.transform = `translate3d(${offsetLeft}px,0,0)`;
    });
  }
});
</script>
<style scoped lang="less">
.j-tabList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 30px;
  .swiper {
    display: flex;
    overflow: hidden;
    width: calc(100% - 100px);

    :deep(.swiper-wrapper) {
      display: flex;
      align-items: center;
      .swiper-slide {
        width: fit-content !important;
        flex-shrink: 0;
      }
    }

    .item {
      padding: 3px 8px;
      margin-right: 10px;
      cursor: pointer;
      border: @j_border;
      border-radius: 5px;
      flex-shrink: 0;
      &:hover {
        background-color: var(--color-fill-1);
      }
      &.active {
        background-color: @primary-6;
        color: #fff;
      }
    }
  }
  .item {
    padding: 3px 8px;
    margin-right: 10px;
    cursor: pointer;
    border: @j_border;
    border-radius: 5px;

    &:hover {
      background-color: var(--color-fill-1);
    }
    &.active {
      background-color: @primary-6;
      color: #fff;
    }
  }
}
</style>
